<template>
  <view class="container">    
    <view class="form-group">
      <text class="label">输入支付密码</text>
      <input
        class="password-input"
        type="password"
        maxlength="6"
        placeholder="请输入6位数字密码"
        v-model="password"
        @input="checkPassword"
      />
    </view>
    
    <view class="form-group">
      <text class="label">确认支付密码</text>
      <input
        class="password-input"
        type="password"
        maxlength="6"
        placeholder="再次输入6位数字密码"
        v-model="confirmPassword"
        @input="checkPassword"
      />
    </view>
    
    <button
      class="submit-btn"
      :disabled="!isFormValid"
      @click="submitPassword"
    >
      提交
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      password: '', // 用户输入的密码
      confirmPassword: '', // 用户确认的密码
      isFormValid: false, // 表单是否有效
    };
  },
  methods: {
    // 检查密码规则和一致性
    checkPassword() {
      this.isFormValid =
        this.password.length === 6 &&
        /^\d+$/.test(this.password) &&
        this.password === this.confirmPassword;
    },
    // 提交密码
    submitPassword() {
      if (!this.isFormValid) {
        uni.showToast({ title: '请检查密码输入是否正确', icon: 'none' });
        return;
      }
      uni.showLoading({ title: '提交中...' });
	  let params = {password: this.password}
	  let self = this;
	  self._post('user.user/set_password', params, function(res) {
	  	console.info(res)
		self.loading = false;
		uni.hideLoading();
		uni.showToast({ title: '设置成功', icon: 'success' });
	  	// 跳转到其他页面
	  	uni.navigateBack();
	  });
    },
  },
};
</script>

<style>
.container {
  padding: 20px;
  background-color: #fff;
  height: 100vh;
}
.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}
.form-group {
  margin-bottom: 20px;
}
.label {
  font-size: 16px;
  margin-bottom: 10px;
  display: block;
}
.password-input {
  height: 50px;
  font-size: 16px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.submit-btn {
  width: 100%;
  height: 50px;
  background-color: #007aff;
  color: #fff;
  font-size: 18px;
  border: none;
  border-radius: 4px;
  text-align: center;
}
.submit-btn:disabled {
  background-color: #ccc;
}
</style>
